<template>
	<!-- 订单详情 -->
	<view class="shopOrderInfo-main" v-if="orderInfo">		
		<!-- 订单状态 -->
		<view class="shopOrder-type">
			<!-- 云店订单状态 -->
			<view class="" v-if="storeType == '0'">
				<!-- 商家自配 -->
				<view class="" v-if="!orderInfo.sync_order_id">
					{{statusNameFilter(orderInfo.distribution_state)}}
				</view>
				<!-- 云仓发货 -->
				<view class="" v-else>
					{{statusNameFilter(orderInfo.distribution_state)}}
				</view>
			</view>
			
			<!-- 闪电送订单状态 -->
			<view class="" v-if="storeType == '1'">
				<!-- 骑手配送 -->
				<view class="" v-if="orderInfo.distribution_type != 1">
					<text v-if="orderInfo.distribution">
						{{orderTypeFilter(orderInfo.distribution_state)}}
					</text>
					<text v-else>待配送</text>
				</view>
				<!-- 到店自提 -->
				<view class="" v-else>
					{{ orderInfo.distribution_state == 5 ? '已完成' : '待销核' }}
				</view>
			</view>
		</view>
		
		<!-- 订单状态提示 -->
		<view class="shopOrder-tips">
			<!-- 云店订单状态 -->
			<view class="" v-if="storeType == '0'">
				<!-- 商家自配 -->
				<view class="" v-if="!orderInfo.sync_order_id">
					{{statusTipsFilter(orderInfo.distribution_state)}}
				</view>
				<!-- 云仓发货 -->
				<view class="" v-else>
					{{statusTipsFilter(orderInfo.distribution_state)}}
				</view>
			</view>
			
			<!-- 闪电送订单状态 -->
			<view class="" v-if="storeType == '1'">
				<!-- 骑手配送 -->
				<view class="" v-if="orderInfo.distribution_type != 1">
					<text  v-if="orderInfo.distribution">
						{{ orderTypeNameFilter(orderInfo.distribution.statusCode) }}
					</text>
					<text v-else>订单等待配送中</text>
				</view>
				<!-- 到店自提 -->
				<view class=""  v-else>
					{{ orderInfo.distribution_state == 5 ? '订单已销核' : '等待订单销核' }}
				</view>
			</view>
		</view>

		<!-- 配送信息-->
		<view class="shopOrder-distribution" >
			<text class="distributionName">配送信息</text>
			<view class="distribution-info" v-if="storeType == '0' && orderInfo.distribution" @click="gotoPath">
				<view class="distribution-gs">
					<view style="margin-right: 8rpx">
						<uni-icons type="shop-filled" size="18"></uni-icons>
					</view>
					<view class="">
						<text style="margin-right: 10rpx">
							{{orderInfo.distribution[0].deliveryCompany}}
						</text>
						<text>
							{{orderInfo.distribution[0].deliverySn}}
						</text>
					</view>
				</view>
				<view class="distribution-wl">
					<view style="margin-right: 8rpx">
						<uni-icons type="wallet-filled" size="18"></uni-icons>
					</view>
					<view class="wlInfo">
						<view class="wlInfo-type">
							{{orderInfo.distribution[0].expressInfos[orderInfo.distribution[0].expressInfos.length-1].status}}
						</view>
						<view class="wlInfo-time">
							{{orderInfo.distribution[0].expressInfos[orderInfo.distribution[0].expressInfos.length-1].time}}
						</view>
					</view>
					<view class="">
						<uni-icons type="right" size="18"></uni-icons>
					</view>
				</view>
			</view>
			
			<view class="distribution-info">
				暂无配送信息
			</view>

			<view class="distribution-qs" :class="[isShow ? 'distribution-qs-heigth' : '']" v-if="storeType == '1'">
				<view class="riderItem">
					<view class="riderItem-label">配送平台：</view>
					<text v-if="orderInfo.flash_platform == '1'">达达秒送</text>
					<text v-if="orderInfo.flash_platform == '2'">UU跑腿</text>
				</view>

				<view class="riderItem">
					<view class="riderItem-label">骑手姓名：</view>
					{{ orderInfo.distribution.transporterName || '暂无' }}
				</view>
				<view class="riderItem">
					<view class="riderItem-label">骑手电话：</view>
					{{ orderInfo.distribution.transporterPhone || '暂无' }}
				</view>
				<view class="riderItem">
					<view class="riderItem-label">总配送费用：</view>
					￥{{ orderInfo.distribution.deliveryFee ? orderInfo.distribution.deliveryFee.toFixed(2) : '0.00' }}
				</view>
				<view class="riderItem">
					<view class="riderItem-label">小费：</view>
					￥{{ orderInfo.distribution.tips ? orderInfo.distribution.tips.toFixed(2) : '0.00' }}
				</view>
				<view class="riderItem">
					<view class="riderItem-label">实际配送费：</view>
					￥{{ orderInfo.distribution.actualFee ? orderInfo.distribution.actualFee.toFixed(2) : '0.00' }}
				</view>
				<view class="riderItem">
					<view class="riderItem-label">配送距离：</view>
					{{ orderInfo.distribution.distance ? (orderInfo.distribution.distance / 1000).toFixed(2) : '0.00' }}km
				</view>
				<view class="riderItem">
					<view class="riderItem-label">发单时间：</view>
					{{ orderInfo.distribution.createTime || '暂无' }}
				</view>
				<view class="riderItem">
					<view class="riderItem-label">接单时间：</view>
					{{ orderInfo.distribution.acceptTime || '暂无' }}
				</view>
				<view class="riderItem">
					<view class="riderItem-label">取货时间：</view>
					{{ orderInfo.distribution.fetchTime || '暂无' }}
				</view>
				<view class="riderItem">
					<view class="riderItem-label">送达时间：</view>
					{{ orderInfo.distribution.finishTime || '暂无' }}
				</view>
				<view class="riderItem">
					<view class="riderItem-label">取消时间：</view>
					{{ orderInfo.distribution.cancelTime || '暂无' }}
				</view>
			</view>

			<view class="openBox" @click="getShow" v-if="storeType == '1'">
				{{ isShow ? '收起' : '点击展开' }}
				<uni-icons :type="isShow ? 'up' : 'down'" size="20" color="#444" style="margin-left: 4px"></uni-icons>
			</view>
		</view>

		<!-- 退货申请 -->
		<view class="shopOrder-refund" v-if="storeType == '0'">
			<view class="shopOrder-refund-header">用户发起【退单】申请</view>
			<view class="distribution-wl">
				<view class="wlInfo">
					<view class="wlInfo-type">申请理由：其他</view>
					<view class="wlInfo-time">2024-08-02 14:40:47</view>
				</view>
				<view class="">
					<uni-icons type="right" size="18"></uni-icons>
				</view>
			</view>
		</view>

		<!-- 地址 -->
		<view class="shopOrder-position">
			<view class="shopOrder-time">
				<view class="tags">
					<uni-tag :text="distributionTypeFilter(orderInfo.distribution_type)" type="error"></uni-tag>
				</view>
			</view>
			<view class="shopOrder-site">
				<view class="shopOrder-site-info">
					<view class="info-iphone">{{ orderInfo.address_info.name || '暂无信息' }} {{ orderInfo.address_info.phone || '暂无信息' }}</view>
					<view class="info-site">
						{{ orderInfo.address_info.address || '暂无信息' }}
					</view>
				</view>
			</view>
		</view>

		<view style="margin: 30rpx 0; border-radius: 20rpx; overflow: hidden" v-if="storeType == '1'">
			<map id="map" :longitude="storeInfo.lng" :latitude="storeInfo.lat" scale="14" :markers="markers" show-location style="width: 100%; height: 300px"></map>
		</view>

		<!-- 备注 -->
		<view class="shopOrder-remark">
			<text class="remarkTitle">备注</text>
			<view class="remark-content">
				<view class="remark-title">商家备注</view>
				<view class="remark-input">
					<input type="text" class="inputSty" placeholder="点击输入商家备注" />
					<uni-icons type="compose" size="18" color="#2979ff"></uni-icons>
				</view>
			</view>
		</view>

		<!-- 订单详细 -->
		<view class="orderInfo">
			<view class="orderInfo-pp">
				<view class="pp-title">商品信息</view>
			</view>

			<view class="orderInfo-shop" v-for="(item, index) in orderInfo.goods_info" :key="item.id">
				<view class="shopImage">
					<image :src="imageUrls(item.fileUrl)" mode="widthFix" class="images"></image>
				</view>
				<view class="shopInfo">
					<view class="shopInfo-name">
						<text>
							{{ item.name }}
						</text>
						<text>
							<text style="font-size: 12px">￥</text>
							{{ item.price != '0.00' ? item.price : item.saleprice }}
						</text>
					</view>
					<view class="shopInfo-gg">
						<text>规格:{{ item.spec }}</text>
						<text>x{{ item.buy_num }}</text>
					</view>
				</view>
			</view>

			<view class="shopInfo-hj">
				共
				<text class="jc">
					{{ orderInfo.goods_info ? orderInfo.goods_info.length : '0' }}
				</text>
				件商品，合计
				<text class="jc" style="padding-right: 0px">
					<text style="font-size: 12px">￥</text>
					{{ orderInfo.pay_money || '0.00' }}
				</text>
			</view>

			<view class="orderExpenseDetail">
				<view class="detailItem">
					<view class="detailName">{{ storeType == '1' ? '配送费' : '实收运费' }}</view>
					<view class="detailNum">
						<text style="font-size: 12px">￥</text>
						{{ orderInfo.freight || '0.00' }}
					</view>
				</view>

				<!-- <view class="detailItem">
					<view class="detailName">其他费用</view>
					<view class="detailNum">￥0.00</view>
				</view>

				<view class="detailItem">
					<view class="detailName">代收费用</view>
					<view class="detailNum">￥0.00</view>
				</view>

				<view class="detailItem">
					<view class="detailName">优惠金额</view>
					<view class="detailNum">￥0.00</view>
				</view> -->

				<!-- <view style="border-radius: 10rpx; overflow: hidden; color: #777">
					<view class="detailItem" style="background-color: #f3f3f3; box-sizing: border-box; padding: 0px 20rpx">
						<view class="detailName">代金券</view>
						<view class="detailNum">￥0.00</view>
					</view>

					<view class="detailItem" style="background-color: #f3f3f3; box-sizing: border-box; padding: 0px 20rpx">
						<view class="detailName">专项立减</view>
						<view class="detailNum">￥0.00</view>
					</view>
				</view> -->

				<view class="detailItem">
					<view class="detailName">顾客实付</view>
					<view class="detailNum bsty">
						<text style="font-size: 12px">￥</text>
						{{ orderInfo.pay_money || '0.00' }}
					</view>
				</view>
			</view>

			<view class="orderExpenseDetail" style="border: none">
				<!-- <view class="detailItem">
					<view class="detailName">费用明细</view>
					<view class="detailNum">￥0.00</view>
				</view>

				<view class="detailItem" style="background-color: #f3f3f3; color: #777; box-sizing: border-box; padding: 0px 20rpx; border-radius: 10rpx">
					<view class="detailName">推广费</view>
					<view class="detailNum">￥0.00</view>
				</view> -->

				<view class="detailItem">
					<view class="detailName">本单收入</view>
					<view class="detailNum bsty">
						<text style="font-size: 12px">￥</text>
						{{ orderInfo.pay_money }}
					</view>
				</view>

				<!-- <view class="detailItem" style="border-top: 1px #f3f3f3 solid">
					<view class="detailName">线下补贴</view>
					<view class="detailNum">￥0.00</view>
				</view> -->
			</view>
		</view>

		<view class="orderData">
			<view class="orderExpenseDetail" style="border: none">
				<view class="detailItem">
					<view class="detailName">订单号码</view>
					<view class="detailNum">
						<text>
							{{ orderInfo.order_no || '0.00' }}
						</text>
						<text class="copy" @click="copyText(orderInfo.order_no)">复制</text>
					</view>
				</view>

				<view class="detailItem">
					<view class="detailName">订单来源</view>
					<view class="detailNum">
						{{ storeType == '1' ? '闪电送' : '全国送' }}
					</view>
				</view>

				<view class="detailItem">
					<view class="detailName">下单时间</view>
					<view class="detailNum">
						{{ formatTimestamps(orderInfo.createtime) }}
					</view>
				</view>

				<view class="detailItem">
					<view class="detailName">支付方式</view>
					<view class="detailNum">线上支付</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { flashManageOrderDetail } from '../../../api/flashManage/index.js';
import { formatTimestamp } from '../../../utils/tools.js';
import { imageUrl } from '../../../utils/tools.js';
export default {
	data() {
		return {
			// 订单详情
			orderInfo: null,
			// 订单ID
			order_id: null,
			markers: [],
			storeInfo: {
				lng: 0,
				lat: 0
			},
			storeType: '',
			isShow: false
		};
	},

	onLoad(option) {
		const { id } = option;
		this.order_id = id;
		this.storeType = this.$store.state.storeType;
		this.getflashManageOrderDetail();
	},

	onShow() {
		this.storeInfo = this.$store.state.storeInfo;
	},

	methods: {
		// 时间格式化
		formatTimestamps(timestamp) {
			return formatTimestamp(timestamp);
		},

		imageUrls(url) {
			return imageUrl(url);
		},
		// 复制
		async copyText(text) {
			try {
				await uni.setClipboardData({
					data: text
				});
				uni.showToast({
					title: '复制成功',
					icon: 'none',
					duration: 1500
				});
			} catch (e) {
				uni.showToast({
					title: '复制失败',
					icon: 'none',
					duration: 1500
				});
			}
		},
		// 订单详情
		async getflashManageOrderDetail() {
			try {
				const resData = await flashManageOrderDetail({
					id: this.order_id,
					type: this.storeType
				});
				this.orderInfo = resData.data;

				this.markers.push({
					id: 0,
					latitude: this.orderInfo.address_info.lat,
					longitude: this.orderInfo.address_info.lng,
					width: 30,
					height: 30,
					title: '目的地'
				});

				if (this.orderInfo.distribution) {
					this.markers.push({
						id: 1,
						latitude: this.orderInfo.distribution.transporterLat,
						longitude: this.orderInfo.distribution.transporterLng,
						width: 30,
						height: 30,
						title: '骑手'
					});
				}
			} catch (e) {
				throw Error(e);
			}
		},

		distributionTypeFilter(status) {
			const statusMap = {
				0: '快递配送',
				1: '到店自提',
				2: '送货上门'
			};
			return statusMap[status];
		},
		
		orderStatuFilter(info){
			if(this.storeType == '0'){
				return this.statusNameFilter(info.distribution_state);
			}else if(this.storeType == '1'){
				return this.orderTypeFilter(info.distribution.statusCode);
			}
		},

		orderTypeFilter(type) {
			let typeList = {
				1: '待骑手接单',
				2: '待骑手取货',
				3: '骑手配送中',
				4: '待确认收货',
				5: '已取消',
				8: '指派单',
				9: '妥投异常之物品返回中',
				10: '妥投异常之物品返回完成',
				100: '骑士到店'
			};
			return typeList[type];
		},
		
		// 状态值过滤
		statusNameFilter(status) {
			if (!status) {
				return '待发起配送';
			}
			const statusMap = {
				0: '待发货',
				1: '待配送',
				2: '已发货',
				3: '配送中',
				4: '待收货',
				5: '已完成'
			};
			return statusMap[status];
		},
		
		// 状态值过滤
		statusTipsFilter(status) {
			if (!status) {
				return '待发起配送';
			}
			const statusMap = {
				0: '待商家发货',
				1: '待配送',
				2: '商品已发货',
				3: '配送中',
				4: '待用户确认收货',
				5: '订单已完成'
			};
			return statusMap[status];
		},

		orderTypeNameFilter(type) {
			let typeList = {
				1: '配送已发起，等待骑手接单中',
				2: '骑手已接单，等待骑手上门取货',
				3: '骑手已取货，正在配送中',
				4: '骑手已送达，等待客户确认收货',
				5: '配送订单已取消',
				8: '订单指派中',
				9: '异常订单：妥投异常之物品返回中',
				10: '异常订单：妥投异常之物品返回完成',
				100: '骑手已到店，待取货'
			};
			return typeList[type];
		},

		getShow() {
			this.isShow = !this.isShow;
		},
		
		gotoPath(){
			uni.navigateTo({
				url:`/pages/storeSide/logisticsInformation/logisticsInformation?id=${this.order_id}`
			})
		}
	}
};
</script>

<style>
page {
	background-color: #f3f3f3;
}
</style>

<style scoped lang="scss">
@mixin Basics {
	margin-top: 30rpx;
	box-sizing: border-box;
	padding: 30rpx;
	background-color: #fff;
	border-radius: 24rpx;
}
.shopOrderInfo-main {
	box-sizing: border-box;
	padding: 30rpx;

	.shopOrder-type {
		font-size: 32rpx;
		color: #444;
		font-weight: bold;
		text-align: center;
	}

	.shopOrder-tips {
		color: #444;
		margin-top: 30rpx;
		font-size: 26rpx;
		text-align: center;
	}

	.shopOrder-refund {
		@include Basics();
		.shopOrder-refund-header {
			margin-bottom: 30rpx;
			font-size: 28rpx;
			font-weight: bold;
		}
		.distribution-wl {
			display: flex;
			.wlInfo {
				flex: 1;
				.wlInfo-type {
					margin-bottom: 10rpx;
					font-size: 26rpx;
					color: #444;
				}
				.wlInfo-time {
					font-size: 24rpx;
					color: #999;
				}
			}
		}
	}

	.shopOrder-distribution {
		@include Basics();
		font-size: 26rpx;
		.distributionName {
			padding-bottom: 30rpx;
			border-bottom: 1px #f3f3f3 solid;
			display: block;
		}
		.distribution-info {
			padding-top: 30rpx;
			.distribution-gs {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;
			}

			.distribution-wl {
				display: flex;
				.wlInfo {
					flex: 1;
					.wlInfo-type {
						margin-bottom: 10rpx;
						color: #444;
					}
					.wlInfo-time {
						font-size: 24rpx;
						color: #999;
					}
				}
			}
		}

		.distribution-qs {
			height: 340rpx;
			overflow: hidden;
		}

		.distribution-qs-heigth {
			height: 100%;
		}

		.openBox {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 20rpx;
			color: #444;
			font-size: 26rpx;
		}
	}

	.shopOrder-position {
		@include Basics();

		.shopOrder-time {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30rpx;
			.times {
				font-size: 28rpx;
				.psty {
					color: #2979ff;
					margin: 0px 10rpx;
				}
			}
		}

		.shopOrder-site {
			display: flex;
			font-size: 28rpx;

			.shopOrder-site-info {
				flex: 1;
				margin-right: 20rpx;
				.info-iphone {
					margin-bottom: 20rpx;
				}

				.info-site {
					color: #999;
				}
			}

			.shopOrder-site-map {
				width: 180rpx;
			}
		}
	}

	.shopOrder-remark {
		@include Basics();
		padding-bottom: 0px;
		.remarkTitle {
			display: block;
			padding-bottom: 30rpx;
			border-bottom: 1px #f3f3f3 solid;
		}

		.remark-content {
			display: flex;
			height: 100rpx;
			line-height: 100rpx;
			.remark-title {
				width: 200rpx;
				color: #999;
				font-size: 26rpx;
			}

			.remark-input {
				flex: 1;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				.inputSty {
					height: 30px;
					text-align: right;
					color: #999;
					margin-right: 8rpx;
					font-size: 26rpx;
				}
			}
		}
	}

	.orderInfo {
		@include Basics();
		.orderInfo-pp {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 30rpx;
			border-bottom: 1px #f3f3f3 solid;
		}

		.orderInfo-shop {
			display: flex;
			box-sizing: border-box;
			padding: 30rpx 0px;
			border-bottom: 1px #f3f3f3 solid;
			.shopImage {
				width: 180rpx;
				.images {
					width: 160rpx;
					height: 160rpx;
				}
			}

			.shopInfo {
				flex: 1;
				.shopInfo-name {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-weight: bold;
					font-size: 30rpx;
				}
				.shopInfo-gg {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 20rpx 0px 60rpx 0px;
					color: #999;
					font-size: 28rpx;
				}
			}
		}
	}

	.orderData {
		background-color: #fff;
		box-sizing: border-box;
		padding: 30rpx;
		border-radius: 24rpx;
		margin-top: 30rpx;
	}

	.shopInfo-hj {
		text-align: right;
		font-size: 28rpx;
		margin-top: 20rpx;
		.jc {
			font-weight: bold;
			padding: 0px 20rpx;
			font-size: 30rpx;
			color: red;
		}
	}

	.orderExpenseDetail {
		padding-top: 10rpx;
		border-bottom: 1px #f3f3f3 solid;
		font-size: 26rpx;
		.detailItem {
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.bsty {
				color: #2979ff;
				font-size: 30rpx;
				font-weight: bold;
			}

			.detailNum {
				.copy {
					display: inline-block;
					padding: 8rpx 20rpx;
					background-color: #f3f3f3;
					font-size: 24rpx;
					border-radius: 20rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
}

.riderItem {
	height: 70rpx;
	line-height: 70rpx;
	color: #444;
	width: 100%;
	display: flex;
	align-items: center;
	.riderItem-label {
		width: 180rpx;
		text-align: left;
		color: #999;
	}
}
</style>
